介紹

Google Analytics 在 React常被使用到的就是 react-ga套件，通常會為了不要每一隻程式碼都加入Ga所以會把這個import到 layout， 這樣只要寫一次import 管理上會比較輕鬆

在Layout這隻程式碼中，可以看到在 componentDidMount中如果還沒有初始化過 !window.GA_INITIALIZED
就跑 initGA() 一次即可，接下來應為使用logPageView 告訴Ga 目前的路徑是哪邊，這樣就不需要每隻頁面都加入讓他動態抓取就可以了

import React from 'react'
import { initGA, logPageView } from '../utils/analytics'

export default class Layout extends React.Component {
  componentDidMount () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }
  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

設定 與 logPageView
設定就 給 initGA google 提供的申請的 GA 編號，logPageView部分會把當然 router.push改變的值告訴GA 這樣GA才能在後台幫忙分析

import ReactGA from 'react-ga'

export const initGA = () => {
  console.log('GA init')
  ReactGA.initialize('UA-xxxxxxxxx-1')
}

export const logPageView = () => {
  console.log(`Logging pageview for ${window.location.pathname}`)
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

export const logEvent = (category = '', action = '') => {
  if (category && action) {
    ReactGA.event({ category, action })
  }
}

export const logException = (description = '', fatal = false) => {
  if (description) {
    ReactGA.exception({ description, fatal })
  }
}

總結

React-Ga套件超方便，所以在設定時候 直接寫到 Layout 不需要每一頁都砍入，再由 logPageView 去代理，把瀏覽頁面的資訊傳到GA

官方 github 範例

https://github.com/zeit/next.js/tree/canary/examples/with-react-ga